<template>
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="待开票" name="free">
      <el-row>
        <el-col :span="12">
          <el-popover placement="bottom" trigger="click">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="账号类型">
                <el-select v-model="form.type">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in typeList"
                    :key="index"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="付款方式">
                <el-select v-model="form.payWay">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in payWayList"
                    :key="index"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="升级时间">
                <el-date-picker
                  v-model="form.upTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <el-form-item label="失效时间">
                <el-date-picker
                  v-model="form.faTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary">确定</el-button>
                <el-button>取消</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
            <el-button slot="reference">
              全部
              <i class="el-icon-caret-bottom"></i>
            </el-button>
          </el-popover>
        </el-col>
        <el-col :span="12" class="text-right">
          <span class="a">金额总计：150,000.00</span>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          :highlight-current-row="true"
          :header-cell-style="{ background: '#ededed', color: '#333' }"
        >
          <el-table-column prop="number" align="center" label="订单编号" />
          <el-table-column prop="type" align="center" label="账号类型" />
          <el-table-column
            prop="name"
            align="center"
            width="180"
            label="公司名称"
          />
          <el-table-column prop="amount" align="center" label="订单金额" />
          <el-table-column prop="email" align="center" label="收发票邮箱" />
          <el-table-column prop="ahead" align="center" label="开票抬头" />
          <el-table-column prop="num" align="center" label="纳税人识别号" />
          <el-table-column prop="address" align="center" label="地址和电话" />
          <el-table-column prop="where" align="center" label="开户行" />
          <el-table-column prop="a" align="center" label="账号" />
          <el-table-column prop="time" align="center" label="申请开票时间" />
        </el-table>
      </el-row>

      <el-pagination
        class="text-right"
        background
        :current-page="1"
        :page-sizes="[20,]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200"
      />
    </el-tab-pane>

    <el-tab-pane label="已开票" name="done">
      <el-row>
        <el-col :span="12">
          <el-popover placement="bottom" trigger="click">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="账号类型">
                <el-select v-model="form.type">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in typeList"
                    :key="index"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="付款方式">
                <el-select v-model="form.payWay">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in payWayList"
                    :key="index"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="升级时间">
                <el-date-picker
                  v-model="form.upTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <el-form-item label="失效时间">
                <el-date-picker
                  v-model="form.faTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary">确定</el-button>
                <el-button>取消</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
            <el-button slot="reference">
              全部
              <i class="el-icon-caret-bottom"></i>
            </el-button>
          </el-popover>
        </el-col>
        <el-col :span="12" class="text-right">
          <span class="a">金额总计：150,000.00</span>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          :highlight-current-row="true"
          :header-cell-style="{ background: '#ededed', color: '#333' }"
        >
          <el-table-column prop="number" align="center" label="订单编号" />
          <el-table-column prop="type" align="center" label="账号类型" />
          <el-table-column
            prop="name"
            align="center"
            width="180"
            label="公司名称"
          />
          <el-table-column prop="amount" align="center" label="订单金额" />
          <el-table-column prop="email" align="center" label="收发票邮箱" />
          <el-table-column prop="ahead" align="center" label="开票抬头" />
          <el-table-column prop="num" align="center" label="纳税人识别号" />
          <el-table-column prop="address" align="center" label="地址和电话" />
          <el-table-column prop="where" align="center" label="开户行" />
          <el-table-column prop="a" align="center" label="账号" />
          <el-table-column prop="time" align="center" label="申请开票时间" />
        </el-table>
      </el-row>

      <el-pagination
        class="text-right"
        background
        :current-page="1"
        :page-sizes="[20,]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    name: 'invoice',
    data() {
      return {
        activeName: 'free',
        form: {
          type: '',
          payWay: '',
          upTime: '',
          faTime: '',
        },
        typeList: [
          {
            label: '全部',
            value: '',
          },
          {
            label: '记账公司',
            value: 1,
          },
          {
            label: '企业',
            value: 2,
          },
        ],
        tableData: [
          {
            number: '16492',
            name: '天津卓诚科技有限公司',
            type: '记账公司',
            amount: 5000,
            email:  '123@126.com',
            ahead:  '天津卓诚科技有限公司',
            num:  '91120104093612144J',
            address:  '',
            where:  '',
            a:  '',
            time:  '2019-08-16'
          },
          {
            number: '15492',
            name: '天津隆由科技有限公司',
            type: '企业',
            amount: 500,
            email:  '123@126.com',
            ahead:  '天津隆由科技有限公司',
            num:  '91120104093612144J',
            address:  '',
            where:  '',
            a:  '',
            time:  '2019-08-16'
          },

        ],
      };
    },
    methods: {},
  };
</script>

<style scoped>
  .a{
    float: right;
  }
  .text-right{
    float: right;
  }
</style>
